<script setup lang="ts">
import { ref } from 'vue'

const money = ref(100)
// 函数
const buy=(num:number)=>{
  money.value-=num
}

const testEvent=(e:any,info:string)=>{
  console.log(e)
  console.log(info)
}
</script>


<template>
  <div id="app">
    <div class="box">
      <h3>黑马自动售货机</h3>
      <button v-on:click="buy(5)">可乐5元</button>
      <button @click="buy(10)">咖啡10元</button>
      <button @click="buy(8)">牛奶8元</button>
    </div>
    <p>银行卡余额：{{ money }}元</p>
  </div>
  <!-- 默认的事件参数 -->
   <!--
  事件触发时，浏览器会默认传递一个【事件参数】给函数，内部有很多信息，
  触发事件时，既要获取默认的事件参数，又要传递自定义的参数可以使用 $event 替代默认的事件参数 
     -->
  <button @click="testEvent($event,'666')">testEvent</button>
</template>

<style>
.box {
  border: 3px solid #000000;
  border-radius: 10px;
  padding: 20px;
  margin: 20px;
  width: 200px;
}

h3 {
  margin: 10px 0 20px 0;
}

p {
  margin: 20px;
}
</style>
